<template>
  <u-modal :show="showModal" @cancel="onClose" @confirm="onConfirm" title="编辑" :showCancelButton="true">
    <view class="" style="width: 84%">
      <view class="edit-machine-form-item">
        <text class="edit-machine-form-item-label">机台:</text>
        <u-input type="number" disabled v-model="ruleForm.machineCode" :customStyle="{ border: 'solid 1rpx #dcdee2' }"></u-input>
      </view>
      <view class="edit-machine-form-item">
        <text class="edit-machine-form-item-label">产品:</text>
        <u-input type="number" disabled v-model="ruleForm.productName" :customStyle="{ border: 'solid 1rpx #dcdee2' }"></u-input>
      </view>
      <view class="edit-machine-form-item" @click="onSelectTime">
        <text class="edit-machine-form-item-label">开台时间:</text>
        <view style="border: solid 1rpx #dcdee2;padding: 6px 9px;border-radius: 4px;height: 38px;box-sizing: border-box;">{{ ruleForm.time }}</view>
      </view>
      <u-datetime-picker
          :show="showTime"
          v-model="timeVal"
          mode="time"
          @close="showTime = false"
          @confirm="onConfirmOfSelectTime"
      ></u-datetime-picker>
    </view>
  </u-modal>
</template>
<script>
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      formData: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    data() {
      return {
        timeVal: '',
        showTime: false,
        showModal: false,
        ruleForm: {}
      };
    },
    methods: {
      onConfirmOfSelectTime(e) {
        this.$set(this.ruleForm, 'time', e.value);
        this.showTime = false;
      },
      onSelectTime() {
        this.showTime = true;
      },
      onClose() {
        this.$emit('close', false);
      },
      onConfirm() {
        this.$emit('confirm', JSON.parse(JSON.stringify(this.ruleForm)));
      }
    },
    watch: {
      show(newVal) {
        this.showModal = newVal;
      },
      formData: {
        handler(newVal) {
          this.ruleForm = JSON.parse(JSON.stringify(newVal));
        },
        deep: true
      }
    }
  }
</script>
<style scoped lang="scss">
  .edit-machine-form-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 20rpx;
    .edit-machine-form-item-label {
      font-size: 28rpx;
      color: #808695;
    }
  }
</style>
